<template>
    <div class="header">
      <!--内容-->
      <div class="content-box">
        <!--图片logon-->
        <div class="logo">
          <img src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg" alt="">
        </div>
        <!--实际内容-->
        <div class="content">
          <div class="title-box">
            <span class="brand"></span>
            <span class="title">{{ sell.name }}</span>
          </div>
          <div class="description">
            {{ sell.description }}/{{ sell.deliveryTime }}分钟送达
          </div>
          <div class="discounts-box" v-if="sell.supports">
            <support-icon :size="1" :type="sell.supports[0].type"></support-icon>
            <span class="title">{{ sell.supports[0].description }}</span>
          </div>
        </div>
      </div>
      <!--右边数字-->
      <div class="support-count">
        <span>5个</span>
        <i class="icon-keyboard_arrow_right"></i>
      </div>
      <!--公告-->
      <div class="notice-box" @click="isShowDetail">
        <span class="notice"></span>
        <span class="title">
          {{ sell.bulletin }}
        </span>
        <i class="notice-right icon-keyboard_arrow_right"></i>
      </div>
      <!--背景-->
      <div class="background">
        <img src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg" alt="">
      </div>
      <!--弹出遮罩详情,默认关闭-->
      <header-detail :sell="sell" v-show="showDetail" @closeHeaderDetail="closeHeaderDetail"></header-detail>
    </div>

</template>
<script>
import SupportIcon from 'components/common/support-icon/support-icon'
import HeaderDetail from 'components/header/header-detail'

export default {
  name: 'sell-header',
  props: {
    sell: Object
  },
  components: {
    SupportIcon,
    HeaderDetail
  },
  data () {
    return {
      showDetail: false
    }
  },
  methods: {
    isShowDetail () {
      this.showDetail = true
    },
    closeHeaderDetail () {
      this.showDetail = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~assets/styles/variable.styl"
@import "~assets/styles/mixin.styl"

.header
  display flex
  background-color $color-background-ss
  position relative
  flex-direction column
  overflow hidden
  .content-box
    display flex
    flex-direction row
    .logo
      margin 24px 0 0 24px
      width 64px
      height 64px
      img
        border-radius 2px
        width 100%
        height 100%
    .content
      padding 26px 12px 20px 16px
      color $color-white
      .title-box
        display flex
        margin-bottom 8px
        .brand
          width: 30px
          height: 18px
          bg-image('/assets/images/header/brand')
          background-size: 30px 18px
          background-repeat: no-repeat
        .title
          font-size $fontsize-large
          font-weight 700
          line-height 18px
          padding-left 6px
      .description
        font-size $fontsize-small
        line-height 12px
        font-weight 100
        margin-bottom 10px
      .discounts-box
        display flex
        .title
          font-size $fontsize-small-s
          line-height 12px
          font-weight 100
          padding-left 4px
  .support-count
    position absolute
    right 12px
    bottom 46px
    font-size $fontsize-small-s
    color $color-white
    height 24px
    line-height 24px
    padding 0 8px
    border-radius 14px
    background-color $color-background-lucency
  .notice-box
    display flex
    flex-direction row
    font-size $fontsize-small-s
    color $color-white
    font-weight 200
    line-height 28px
    background-color $color-background-sss
    .notice
      margin-left 12px
      margin-top 8px
      width: 22px
      height: 12px
      bg-image('/assets/images/header/bulletin')
      background-size: 22px 12px
    .title
      flex 1
      margin-left 4px
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
    .notice-right
      margin 0 4px 0 0
      line-height 28px
  .background
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    z-index -1
    filter: blur(10px)
    img
      width 100%
      height 100%
</style>
